<template>
  <view class="table-container">
    <view v-if="tableType !== 'column'" class="title-box">
      <view :style="{ width: titleItemWidth }" class="title-item" v-for="(item, index) in tableTitleData" :key="index">
        {{ item.title }}
      </view>
    </view>
    <view v-if="tableType !== 'column'" class="data-container">
      <slot></slot>
    </view>


    <view v-if="tableType == 'column'" class="row columnContent" style="overflow: hidden"
      :style="{ height: tableData.length * 88 + 'rpx' }">
      <view class="firstColumn" :style="{ width: colWidth ? colWidth + '%' : '30%' }">
        <view class="data-cell" style="justify-content: flex-start;border-right: 1px solid #cccccc;background: #F8F8F8;"
          :style="{
            'font-weight': index == 0 ? '500' : '',
            padding: index == 0 ? '28rpx 12rpx' : '20rpx 12rpx',
            background: index == 0 ? '#F1F5F9' : '#F8F8F8',
          }" v-for="(item, index) in tableData" :key="index">
          {{ item.month }}
        </view>
      </view>
      <view :style="{width: colWidth+'%'}"></view>
      <view
          :style="{ left:colWidth+'%',width: 100 - Number(colWidth)+'%' }"
          style="overflow-x: auto;position:absolute;">
        <view :style="{width: rightWidth ? rightWidth + '%' : '150%'}">
          <slot></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    colWidth: {
      type: String,
      default: () => '30'
    },
	rightWidth: {
		type: String,
		default: ''
	},
    tableType: {
      type: String,
      default: () => ''
    },
    tableTitleData: {
      type: Array,
      default: () => []
    },
    flexType: {
      type: String,
      default: () => ''
    },
    flexArr: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      titleItemWidth: '0rpx' // 初始化为 0rpx，待计算
    };
  },
  computed: {
    // 计算每个标题和数据单元格的宽度
    computedTitleItemWidth() {
      return (100 / this.tableTitleData.length) + 'rpx';
    }
  },
  watch: {
    // 监听标题数据的变化，更新单元格宽度
    tableTitleData: {
      handler() {
        this.titleItemWidth = this.computedTitleItemWidth;
      },
      immediate: true
    }
  }
};
</script>

<style scoped lang="scss">
.table-container {
  width: 100%;
  border: 1rpx solid #ccc;
  /* 将像素单位换成 rpx */
  display: flex;
  flex-direction: column;
}

.title-box {
  display: flex;
  width: 100%;
  border-bottom: 1rpx solid #ccc;
  /* 将像素单位换成 rpx */
}

.title-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  padding: 28rpx 12rpx;
  /* 将像素单位换成 rpx */
  border-right: 1rpx solid #ccc;
  /* 将像素单位换成 rpx */
  font-size: 24rpx;
  /* 根据需要调整字体大小，单位为 rpx */
  background-color: #F1F5F9;
  text-align: center;
  white-space: nowrap;
}

.title-item:last-child {
  border-right: none;
}

.data-container {
  width: 100%;
}

.data-row {
  display: flex;
}

.columnContent {
  width: 100%;
  overflow-x: hidden;
  position: relative;

  .firstColumn {
    width: 30%;
    position: absolute;

    .data-cell {
      border-right: 1px solid #cccccc;
      background: #F8F8F8;
      justify-content: flex-start;

      &:first-child {
        background-color: #F1F5F9;
        font-weight: 500;
        height: auto;
      }
    }
  }

  .data-cell-box, .data-row {
    &:first-child {
      background: #F1F5F9;
      font-weight: 500;
      height: auto;
      font-size: 24rpx;
      flex: 1;
      display: flex;
      white-space: nowrap;
    }
  }
}
</style>
